import React, { useEffect, useState } from 'react';
import { Modal } from 'antd';
import type { ValueOf } from 'type-fest';

interface PropsType {
  openKey: TypeNumKey;
  changeItem: (arg: TypeNumValue) => void;
}

type TypeNumKey = keyof typeof typeNum;

const typeNum = {
  0: 'num',
  1: '查看',
  2: '删除',
  3: '修改',
} as const;

type TypeNumValue = ValueOf<typeof typeNum, TypeNumKey>;

const ModalChart: React.FC<PropsType> = (props) => {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    // test
    setOpen(props.openKey !== 0);
  }, [props.openKey]);

  const okCallback = () => {
    setOpen(false);
    props.changeItem(typeNum[props.openKey]);
  };
  const cancelCallback = () => {
    setOpen(false);
    props.changeItem(typeNum[props.openKey]);
  };

  return (
    <>
      <Modal
        title={props.children}
        centered
        open={open}
        onOk={() => okCallback()}
        onCancel={() => cancelCallback()}
        width={1000}
      >
        {typeNum[props.openKey]}
      </Modal>
    </>
  );
};

export default ModalChart;
